<template>
	<view class="">
		<!-- <view class="" style="position: sticky;top: 0;z-index: 999;"></view> -->
		<card :cardCont="cardFrom"></card>
		<view class="p-4">
			<!-- <text class="p-2 h6">主营业务：</text> -->
			<view class="business bg-white p-5 h_100">
				<view class="line"></view>
				<view class="tit_text bg_main text-white font_24">主营业务</view>
				<view class="c_6 h5">{{ cardFrom.main_products || '暂无' }}</view>
			</view>
		</view>
		<view class="fix_text w-100 h6 text-center c_9" v-if="cardFrom.card_status == 0 || cardFrom.card_status == 2">交换名片后可进行即时通讯互动</view>
		<view class="bottom fixed-bottom flex justify-between h6 shadow">
			<button class="bg-white c_main text-center" v-if="isLogin" open-type="share">分享名片</button>
			<button class="bg-white c_main text-center" v-else @click="toLogin">分享名片</button>
			<!-- 0 申请中， 1 同意，2 去申请，3 我的名片-->
			<button v-if="cardFrom.card_status == 0" class="bg_main text-white text-center" @click="exChange(cardFrom)">取消交换</button>
			<button v-else-if="cardFrom.card_status == 1" class="bg_main text-white text-center" @click="callChange">拨打电话</button>
			<button v-else-if="cardFrom.card_status == 3" class="bg_main text-white text-center" @click.stop="editCard">编辑名片</button>
			<button v-else class="bg_main text-white text-center" @click="toExChange">交换名片</button>
		</view>
		<!-- 交换名片弹窗 -->
		<u-modal
			:show="exChangeShow"
			title="验证信息"
			confirmText="确认"
			cancelText="取消"
			:showCancelButton="true"
			confirmColor="#CF1526"
			cancelColor="#D3D3D3"
			@confirm="exChange(cardFrom)"
			@cancel="exChangeShow = false"
		>
			<view class="slot-content bg-white"><textarea v-model="content" placeholder="请输入验证消息" class="p-2" style="height: 194rpx;"></textarea></view>
		</u-modal>
	</view>
</template>

<script>
import card from '@/subPages/my/list/card/component/card.vue';
import { businessDetail, exchangeCardApply } from '@/api/my/card.js';
export default {
	components: { card },
	data() {
		return {
			cardFrom: {},
			cardUid: '', //名片用户uid
			exhibitionId: '', //展会id
			content: '我想成为你的圈内好友，希望和你交个朋友！',
			exChangeShow: false,
			isLogin: uni.getStorageSync('userInfo').hasLogin
		};
	},

	onLoad(option) {
		this.cardUid = option.id;
		this.exhibitionId = option.exhibitionId;
		this.getCard();
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// getApp().globalData.productType = 'qz';
		uni.setStorageSync('productType', 'qz');
		console.log('名片', this.cardFrom);
	},
	//分享到聊天
	onShareAppMessage(res) {
		return {
			title: this.cardFrom.name + '的名片',
			path: '/subPages/my/list/card/card_main?id=' + this.cardFrom.uid, //界面路径
			imageUrl: '/static/img2/my/my_card/card_shear.jpg'
		};
	},
	//分享到朋友圈
	onShareTimeline() {
		return {
			title: this.cardFrom.name + '的名片',
			path: '/subPages/my/list/card/card_main?id=' + this.cardFrom.uid, //界面路径
			imageUrl: this.cardFrom.userphoto
			// query: ''
		};
	},
	onUnload() {
		if (uni.getStorageSync('loginToPage').title == 'cardMain') {
			uni.redirectTo({
				url: '/subPages/exhibition/index?id=' + this.exhibitionId + '&active=2'
			});
			uni.removeStorageSync('loginToPage');
		}
	},
	methods: {
		getCard() {
			businessDetail({ uid: this.cardUid })
				.then(res => {
					console.log('res', res);
					if (res.code == 0) {
						this.cardFrom = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取名片详情失败', err);
				});
		},
		// 拨打电话
		callChange() {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin();
				return;
			}
			uni.makePhoneCall({
				phoneNumber: this.cardFrom.phone
			});
		},
		// 交换名片
		exChange(val) {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin();
				return;
			}
			let msg = {
				uid: val.uid,
				apply_card_id: val.id,
				zhanhui_id: this.exhibitionId,
				ask_status: val.ask_status,
				content: this.content
			};
			exchangeCardApply(msg)
				.then(res => {
					// console.log(res);
					uni.$u.toast(res.msg);
					if (res.code == 3) {
						// 去完善名片信息
						setTimeout(() => {
							// 未登录
							let msg = {
								title: 'cardMain',
								cardUid: this.cardUid,
								exhibitionId: this.exhibitionId
							};
							uni.setStorageSync('loginToPage', msg);
							uni.navigateTo({
								url: '/subPages/my/list/card/business_card'
							});
						}, 1500);
						return;
					}
					this.exChangeShow = false;
					this.getCard();
				})
				.catch(err => {
					console.log('交换名片操作失败', err);
				});
		},
		// 去交换名片
		toExChange() {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin();
				return;
			}
			this.exChangeShow = true;
		},
		editCard() {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin();
				return;
			}
			this.goPages('/subPages/my/list/card/business_card');
		}
	}
};
</script>

<style lang="scss" scoped>
.bottom {
	height: 100rpx;
	width: 100%;
	button {
		width: calc(100% / 2);
		line-height: 100rpx;
	}
}
.fix_text {
	position: fixed;
	bottom: 120rpx;
}
.business {
	border-radius: 30rpx;
	position: relative;
	min-height: 830rpx;
	.line {
		width: 94%;
		position: absolute;
		top: 0;
		left: 20rpx;
		border-top: 5px solid $color14;
		border-radius: 10rpx;
	}
	.tit_text {
		position: absolute;
		left: 50%;
		top: -20rpx;
		margin-left: -60rpx;
		padding: 5rpx 25rpx;
		border-radius: 16rpx;
	}
}
</style>
